<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="8">文章名称：<el-input v-model="search.name" style="width: 240px" placeholder="请输入文章名称"
                        clearable /></el-col>
                <el-col :span="12">创建时间:
                    <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="起始日期"
                        end-placeholder="终止日期" />
                </el-col>
                <el-col :span="1"><el-button type="primary"
                        @click="sousuo(search.name, search.time)">搜索</el-button></el-col>
            </el-row>
        </el-col>
        <el-col :span="24" class="col"><el-button type="primary" @click="xinzeng">新增文章</el-button></el-col>
        
        <el-col :span="24" class="col">
            <el-table :data="areaList" border style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                <el-table-column prop="articleName" label="文章名称" align="center" label-class-name="header" />
                <el-table-column prop="articleIntro" label="文章简介" align="center" label-class-name="header" />
                <el-table-column prop="consultantId" label="咨询师id" align="center" label-class-name="header" />
                <el-table-column prop="listImage" label="图片" align="center" label-class-name="header" >
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.listImage" :fit="fit" />
                    </template>
                </el-table-column>
                <el-table-column prop="detailContent" label="详情内容" align="center" label-class-name="header" />
                <el-table-column prop="readCount" label="阅读量" align="center" label-class-name="header" />
                <el-table-column prop="createTime" label="创建时间" align="center" label-class-name="header" />
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="check(item.$index)">查看咨询师</el-button>
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table></el-col>

        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeArea :form="form" @operate="operateAction" v-if="title == '编辑文章'" />
            <XinZeng v-if="title == '新增文章'" @operate="operateAction" />
        </el-dialog>
        <el-dialog v-model="shan" :title="title" width="380" destroy-on-close="true">
            <ShanChu v-if="title == '删除'"  @operate="guanbi" :id="id" />
        </el-dialog>
    </el-row>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex';
import EditeArea from './components/article/EditeArea.vue';
import XinZeng from './components/article/XinZeng.vue';
import ShanChu from './components/article/ShanChu.vue';
let res = null;
let store = useStore();
const search = reactive({
    nmae: null,
    time: null
});
//定义小区列表数据
let areaList = ref([]);
let show = ref(false);
let shan = ref(false);
let title = ref("");
let id = ref({});
let form = ref({});

const check = async function (data) {
    console.log(data);
    store.commit("changeID", res.data.data.list[data].communityId)

}

const edite = function (data) {
    console.log("----------");
    console.log(data);
    show.value = true;
    title.value = "编辑文章";
    form.value = data;
}
const xinzeng = function () {
    show.value = true;
    title.value = "新增文章";
}

const del = function (item) {
    id.value = { id: item.id };
    shan.value = true;
    title.value = "删除";
}

const guanbi = function () {
    shan.value = false;
}

const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;

    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}
const sousuo = async function (name, time) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=${starTime}&endTime=${endTime}&pageNum=1&pageSize=10&communityName=${name}`)
    areaList.value = res.data.data.list.map(item => {
        item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        return item;
    });
    console.log(res);


}

const operateAction = async function (data) {
    if (data) {
        await axios.post("http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate", {
            ...data
        });
        res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=10&communityName=");
        console.log(res);
        areaList.value = res.data.data.list.map(item => {
            item.address = item.communityProvince + item.communityCity + item.communityDistrict;
            return item;
        });

    }
    show.value = false;
}

//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("/api/article/findAll");
    console.log(res);
    areaList.value = res.data.data;
})

</script>

<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>